<template>
  <div class="content">
    <div class="main" id="mainone"></div>
  </div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
  mounted() {
    this.getEcharts();
  },
  methods: {
    getEcharts() {
      var chartDom = document.getElementById("mainone");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "line", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        legend: {
          textStyle: {
            color: "#333",
            fontSize: 12,
          },
          // right: 30,
          bottom: 0,
          itemWidth: 10,
          itemHeight: 15,
          data: [
            {
              name: "累计总数",
              icon: `image://${require("../../../../assets/img/logo.png")}`,
            },
            {
              name: "累计增速",
              icon: `image://${require("../../../../assets/img/logo.png")}`,
            },
          ],
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        grid: {
          top: "10%",
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            splitLine: { show: false },
            axisTick: { show: true },
            axisLabel: { show: true },
            axisLine: { show: true },
          },
        ],

        series: [
          {
            markPoint: {
              data: [
                {
                  yAxis: "420",
                  xAxis: "7月",
                },
              ],
              symbol: "circle", // 标记图形
              symbolSize: 8, // 标记图形的大小
              // 标注点的样式
              itemStyle: {
                color: "#FFF90A", // 标注点颜色
              },
            },
            markLine: {
              // 锁定最后一个元素展示纵向虚线
              symbol: ["none", "none"],
              label: { show: false },
              data: [{ xAxis: 7 - 1 }],
              label: {
                show: true, // 是否展示文字
                color: "#FFF90A",
                fontSize: 14,
                formatter: function () {
                  return "当前值：420";
                },
              },
              lineStyle: {
                color: "#00FFFB",
                type: "solid", // 实线，不写默认虚线
              },
            },
            name: "累计总数",
            type: "line",
            // stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 1,
              color: "#00FFFB",
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00FFFB",
                },
                {
                  offset: 1,
                  color: "transparent",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [20, 402, 231, 134, 190, 330, 420, 534, 90, 30, 20],
          },
          {
            name: "累计增速",
            type: "line",
            // stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 1,
              color: "#00DF9F",
            },
            showSymbol: false,
            label: {
              show: true,
              position: "top",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00DF9F",
                },
                {
                  offset: 1,
                  color: "transparent",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: [120, 302, 181, 234, 210, 290, 150, 234, 210, 290, 150],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>
  
<style scoped>
.content {
  /* // margin-top: 17px; */
  width: 100%;
  height: 100%;
  /* background: url("../../assets/image/scienceBg.png") 0 0 no-repeat; */
  background-size: 100% 100%;
}

.main {
  height: 100%;
  width: 100%;
  /* // border: 1px solid red; */
}
</style>